<script setup>
import {ref, watch} from "vue";
import requestUtil from "@/utils/request";
import {ElMessage} from "element-plus";

const TableData = ref([])

const HostTreeData = ref([])

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    required: true
  },
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true
  },
  tableData: {
    type: Array,
    default: () => [],
    required: true
  },
  treeData: {
    type: Array,
    default: () => [],
    required: true
  },

})

const form = ref({
  id: -1,
  sort_num: 1,
  hostname: '',
  user: 'root',
  port: 22,
  rdp_port: 3389,
  connect_ip: '',
  public_ip_addr: '',
  private_ip_addr: '',
  password: '',
  remark: '',
  create_time: '',
  update_time: '',
  groups: [],
  server_type: '',
})

const rules = ref({
  groups: [
    {required: true, message: '分组不能为空'}
  ],
  hostname: [
    {required: true, message: '主机名不能为空'}
  ],
  connect_ip: [
    {required: true, message: 'IP地址不能为空'}
  ],
  password: [
    {required: false, message: '密码不能为空'}
  ],
  server_type: [
    {required: true, message: '主机类型不能为空'}
  ],
})

const formRef = ref(null)

const initFormData = async (id) => {
  const res = await requestUtil.get('host/host/action?id=' + id);
  form.value = res.data.msg;
}

watch(
    () => props.dialogVisible,
    () => {
      let id = props.id;
      form.value = props.tableData;
      TableData.value = props.tableData;
      // form.value.ip_addr = form.value.public_ip_addr;
      HostTreeData.value = props.treeData; //深拷贝，数据不互相影响
      if (id !== -1) {
        initFormData(id);
        rules.value.password[0].required = false;
      } else {
        rules.value.password[0].required = true;
        form.value = {
          id: -1,
          sort_num: 1,
          hostname: '',
          user: 'root',
          port: 22,
          rdp_port: 3389,
          connect_ip: '',
          public_ip_addr: '',
          private_ip_addr: '',
          password: '',
          remark: '',
          create_time: '',
          update_time: '',
          groups: [],
          server_type: '',
        }
      }
    }
)
const emits = defineEmits(['update:modelValue', 'initTableData', 'initTreeData'])

const handleClose = () => {
  emits('update:modelValue', false)
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value,'==============')
      let res = await requestUtil.post('host/host/action', form.value);
      let data = res.data;
      if (data.code === 200) {
        console.log(form.value.groups)
        ElMessage.success('执行成功')
        formRef.value.resetFields()
        emits('initTableData')
        emits('initTreeData')
        handleClose()
      } else {
        ElMessage.error(data.msg)
      }
    } else {
      console.log('fail')
    }
  })
}
</script>

<template>
  <el-dialog
      v-if="dialogVisible"
      :model-value="dialogVisible"
      :title="dialogTitle"
      style="padding: 40px"
      width="650px"
      @close="handleClose"
      :close-on-click-modal="false"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >

      <el-form-item label="主机分组" prop="groups">
        <el-select
            multiple
            v-model="form.groups"
            placeholder="请选择主机分组"
        >
          <!--          <el-option label="请选择分组" :value="0"></el-option>-->
          <template v-for="item in HostTreeData" :key="item.id">
            <el-option :label="item.name" :value="item.id"></el-option>
            <template v-for="child in item.children" :key="child.id">
              <el-option :label="child.name" :value="child.id">
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ '-- ' + child.name }}</span>
              </el-option>
              <template v-for="child2 in child.children" :key="child2.id">
                <el-option :label="child2.name" :value="child2.id">
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ '-- ' + child2.name }}</span>
                </el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="主机类型" prop="server_type">
        <el-radio-group v-model="form.server_type">
          <el-radio label="linux" :value="1"/>
          <el-radio label="windows" :value="2"/>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="主机名称" prop="hostname" label-width="100px">
        <el-input v-model="form.hostname" placeholder="请输入主机名称"/>
      </el-form-item>

      <el-form-item label="连接地址" prop="connect_ip">
        <div class="flex gap-4 mb-4">
          <el-input
              v-model="form.user"
              style="width: 25%"
              placeholder="用户名"
          >
            <template #prepend>ssh</template>
          </el-input>
          <el-input
              v-model="form.connect_ip"
              style="width: 50%"
              placeholder="IP"
          >
            <template #prepend>@</template>
          </el-input>
          <el-input
              v-model="form.port"
              style="width: 25%"
              placeholder="端口"
          >
            <template #prepend>-p</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="RDP端口" prop="rdp_port">
        <el-input v-model="form.rdp_port" placeholder="请输入RDP端口"/>
      </el-form-item>

      <el-form-item label="独立密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"/>
      </el-form-item>

      <el-form-item label="显示顺序" prop="sort_num">
        <el-input-number v-model="form.sort_num" :min="1" label="显示顺序"/>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">验证</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>